<template>
	<view class="content">
		<video id="video" :style="{width: width, height: height}" :src="file" objectFit="contain" :autoplay="autoplay" :loop="loop" :controls="controls" @play="play" @pause="pause" @ended="ended" @waiting="waiting" @error="videoErrorCallback">
			<cover-view class="shade" @click="controlsPlay"></cover-view>
			<cover-image class="back" src="/static/img/back.png" @click="goback"></cover-image>
			<cover-image v-show="!isplay" class="play" src="/static/img/play.png" @click="controlsPlay"></cover-image>
		</video>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: '',
				height: '',
				media: {},
				file: '',
				autoplay: true,
				loop: true,
				controls: false,
				isplay: true,
				videoContext: null,
			}
		},
		onLoad(option) {
			this.media = JSON.parse(decodeURIComponent(option.media));
			this.file = this.media.file;
			console.log('视频播放地址',this.file)
		},
		onReady() {
			try {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo) {
					this.width = (systemInfo.screenWidth + 1) + 'px';
					this.height = (systemInfo.screenHeight + 1) + 'px';
				}
			} catch (e) {
				console.log(e)
			}
			this.videoContext = uni.createVideoContext('video', this)
		},
		onBackPress(e) {
			if (e.from === 'navigateBack') {
				return false;
			}
			this.goback();
			return true;
		},
		methods: {
			controlsPlay: function () {
				if (this.isplay) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			},
			play: function () {
				this.isplay = true;
			},
			pause: function () {
				this.isplay = false;
			},
			ended: function () {
				// this.videoContext.pause();
			},
			waiting: function () {
				// 缓冲……
			},
			videoErrorCallback: function (e) {
				console.log(e);
			},
			goback: function () {
				this.videoContext.stop();
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	page {
		width: 100%;
		height: 100%;
	}
	#video {
		display: block;
		width: 750rpx;
		height: 750rpx;
	}
	.shade {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.back {
		width: 60rpx;
		height: 60rpx;
		margin-top: var(--status-bar-height);
		position: absolute;
		left: 40rpx;
		top: 20rpx;
		z-index: 2;
	}
	.play {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -30rpx;
		margin-top: -30rpx;
	}
</style>
